<template>
  <div class="w-full h-full flex flex-col">
    <!-- <div class="flex gap-4 mb-4 w-1/2">
      <CompanySelect v-model="companyId" placeholder="请选择物业公司" />
      <CommunitySelect v-model="communityId" :companyId="companyId" @change="getTableData()" placeholder="请选择项目" />
    </div> -->
    <TableLayout class="full-page flex-1 overflow-hidden" v-model:page="page_num" v-model:size="size" :total="total"
      @table-change="getTableData">
      <template #header>
        <div class="flex items-center justify-between">
          <TopFilter class="flex-1 flex-wrap" :model="params" :filters="filters" @change="getTableData()" />
        </div>
      </template>
      <template #table>
        <TableCard ref="tableRef" :tableData="tableData" v-loading="loading" id-key="arrears_data_id"
          @cardClick="onCheckRecord">
          <template #handler="{ row }">
            <div class="flex items-center">
              <el-button v-if="row.status !== '已收回'" type="primary" size="small" text
                @click="handleRecycling(row)">结案</el-button>
              <span v-else>已结案</span>
              <el-dropdown trigger="click">
                <el-button class="ml-2" type="primary" size="small" text>更多</el-button>
                <template #dropdown>
                  <el-dropdown trigger="click">
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click="onCaseFiles(row)">案件文书</el-dropdown-item>
                      <template v-if="row.status !== '已收回'">
                        <el-dropdown-item @click="onCreateTrea(row)">生成起诉状</el-dropdown-item>
                        <el-dropdown-item @click="onLitigation(row)">撤销诉讼</el-dropdown-item>
                        <el-dropdown-item @click="onAddOpenCourt(row)">添加开庭信息</el-dropdown-item>
                        <el-dropdown-item @click="onCheckOpenCourtRecord(row)">查看开庭记录</el-dropdown-item>
                      </template>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-dropdown>
            </div>
          </template>
        </TableCard>
      </template>
    </TableLayout>

    <!-- 案件文书 -->
    <el-dialog v-model="isCase" title="案件文书" width="65%" destroy-on-close>
      <CaseModel :info="info" />
    </el-dialog>

    <!-- 生成起诉状 -->
    <el-dialog v-model="isTrea" title="生成起诉状" width="50%" destroy-on-close>
      <TreaModel :info="info" @close="isTrea = false" @success="getTableData(true)" />
    </el-dialog>

    <!-- 结案 -->
    <el-dialog v-model="isRecycling" title="结案" width="50%" destroy-on-close>
      <CloseCase :info="info" @close="isRecycling = false" @success="getTableData(true)" />
    </el-dialog>

    <!-- 添加开庭信息 -->
    <el-dialog v-model="isOpenCourt" title="添加开庭信息" width="50%" destroy-on-close>
      <AddOpenCourt :info="info" @close="isOpenCourt = false" @success="getTableData(true)" />
    </el-dialog>

    <!-- 跟进数据 -->
    <el-dialog v-model="isRecord" title="跟进记录" width="500px" destroy-on-close>
      <RecordModel :info="info" @success="getTableData(true)" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import TableLayout from '@/components/TableLayout.vue'
import TopFilter from '@/components/CRUD/TopFilter.vue'
import TableCard from '@/components/TableCard/index.vue'
import CompanySelect from '@/views/PropertyCompany/components/CompanySelect.vue'
import CommunitySelect from '@/views/PropertyCompany/components/CommunitySelect.vue'
import CloseCase from './components/CloseCase.vue'
import AddOpenCourt from './components/AddOpenCourt.vue'
import { RecordModel, CaseModel, TreaModel, } from '@/views/Arrears/components/index'
import { useTable, useFilters } from '@/hooks'
import { litServer, triggerLitigation } from '@/api/arrears'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

const filters = [
  { key: 'company_id', type: 'custom', props: { placeholder: '请选择物业公司' }, render: CompanySelect },
  {
    key: 'community_id',
    type: 'custom',
    props: { placeholder: '请选择项目' },
    dynamicProps: (params) => {
      return { companyId: params.company_id }
    },
    render: CommunitySelect
  },
  { key: 'keyword', type: 'input', props: { placeholder: '请输入业主姓名、电话或房间号' } },
]

const companyId = ref()
const communityId = ref()
const { params, getParams } = useFilters(filters)
const { page_num, size, total, tableData, getData, loading } = useTable(litServer.get)
const getTableData = (keepPage) => {
  if (!keepPage) page_num.value = 1
  getData({
    ...getParams(),
    // company_id: companyId.value,
    // community_id: communityId.value,
  })
}
getTableData();


const info = ref()

// 案件文书
const isCase = ref(false)
const onCaseFiles = (row) => {
  isCase.value = true;
  info.value = row;
}

// 生成起诉状
const isTrea = ref(false)
const onCreateTrea = (row) => {
  isTrea.value = true;
  info.value = row;
}

// 结案
const isRecycling = ref(false)
function handleRecycling(row) {
  isRecycling.value = true
  info.value = row
}

// 撤销诉讼
const onLitigation = async (row) => {
  await ElMessageBox.confirm(`是否确认撤销诉讼？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  });
  await triggerLitigation({
    arrears_data_id: row.arrears_data_id,
  })
  ElMessage.success('撤销诉讼成功');
  getTableData(true);
}

// 查看跟进记录
const isRecord = ref(false)
function onCheckRecord(row) {
  isRecord.value = true
  info.value = row
}

// 添加开庭信息
const isOpenCourt = ref(false)
function onAddOpenCourt(row) {
  isOpenCourt.value = true
  info.value = row
}

const router = useRouter();
const onCheckOpenCourtRecord = (row) => {
  router.push({
    name: 'Court',
    query: {
      id: row.arrears_data_id,
      company_id: row.company_id,
      community_id: row.community_id,
    },
  })
}
</script>